    <script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'LessonBuilding',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/library/student'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === '1' ? 'lesson-boy' : 'lesson-girl'" :style="cssVar" @click="changePage">
      <!--     因为设计稿中男女的文字布局有所不一样，所以需要判断性别选择样式 -->
      <div class="student-con">
        <!--       这里是动画的效果，参考aos官网https://michalsnik.github.io/aos/ -->
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.mostBuilding && annualData.mostBuildingJie && annualData.mostClassroom && annualData.mostClassroomJie ">
            <div class="mt-10">
              <br/>
              <p>晨光熹微</p>
              <p>你踏入开启求知</p>
              <p>暮色四合</p>
              <p>你离开满载收获</p>
              <p>2024年</p>
              <p>你的“求学主场”位于</p>
              <p><span class="data">{{ annualData.mostBuilding }}</span></p>
              <p>你频繁穿梭其间</p>
              <p>累计上过 <span class="data">{{ annualData.mostBuildingJie }}</span> 节课</p>
              <p>于细微处觅踪迹</p>
              <p>你的专属充电站是</p>
              <p><span class="data">{{ annualData.mostClassroom }}</span></p>
              <p>你在此度过 <span class="data">{{ annualData.mostClassroomJie }}</span> 节课的时光</p>
            </div>
            <br/>
<!--            <div class="mt-10">
              <p>数字从不撒谎，</p>
              <p>它记下你为学业挥洒的汗水，</p>
              <p>忠实见证每份拼搏，</p>
              <p>铭记这段逐梦的燃情之旅。</p>
            </div>-->
          </div>

            <!--  兜底文案  -->
          <div v-else>
            <div class="mt-10">
              <br/>
              <p>晨光熹微</p>
              <p>你踏入开启求知</p>
              <p>暮色四合</p>
              <p>你离开满载收获</p>
              <p>2024</p>
              <p>你步履匆匆</p>
              <p>奔赴一场场知识的盛宴</p>
            </div>
            <br/>
            <div class="mt-10">
              <p>教学楼间，留下你穿梭的身影</p>
              <p>教室门口，有你驻足的瞬间</p>
              <p>课堂之内，你沉浸其中、求知若渴</p>
            </div>
            <br/>
            <div class="mt-10">
<!--              <p>窗外，四季更迭、寒来暑往。</p>
              <p>案前，奋笔疾书、挥洒汗水。</p>-->
              <p>无论是清晨的朝阳</p>
              <p>还是夜晚的星光</p>
              <p>都见证了你在知识的海洋中遨游的身影</p>
            </div>

          </div>
          </div>
        </div>
      </div>
    </div>

</template>

<style scoped>
.lesson-boy{
  background: url("../../assets/images/lesson/boy-2.jpg") no-repeat;
  background-size: 100% 100%;
}
.lesson-girl{
  background: url("../../assets/images/lesson/girl-2.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-con{
  padding: 20px 60px;
}
.empty-space {
  margin: 200px 0;  /* 上下方向上的空白 */
}
p{
  color: #1B3B6A;
}
</style>
